<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>爱心对话网页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url('1.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            font-family: 'Arial', sans-serif;
            min-height: 100vh;
            touch-action: manipulation; /* 防止双击缩放 */
        }
        
        /* 爱心样式 - 移动端优化 */
        .heart {
            position: absolute;
            transform: rotate(45deg);
            animation: float 5s ease-in-out forwards;
            pointer-events: all;
            cursor: pointer;
            opacity: 0;
        }
        
        .heart:before, .heart:after {
            content: '';
            position: absolute;
            width: inherit;
            height: inherit;
            background: inherit;
            border-radius: 50%;
        }
        
        .heart:before {
            top: -50%;
            left: 0;
        }
        
        .heart:after {
            top: 0;
            left: -50%;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(45deg);
                opacity: 0;
            }
            10% {
                opacity: 0.9;
            }
            90% {
                opacity: 0.9;
            }
            100% {
                transform: translateY(-100vh) rotate(45deg);
                opacity: 0;
            }
        }
        
        /* 对话框样式 - 移动端优化 */
        .message-box {
            position: fixed;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 15px 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            max-width: 85%;
            word-wrap: break-word;
            z-index: 1000;
            opacity: 0;
            transform: translateY(20px);
            animation: slideIn 0.3s ease-out forwards;
            font-size: 16px;
        }
        
        @keyframes slideIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 彩色弹窗样式 */
        .message-box.color-1 {
            background-color: rgba(255, 240, 245, 0.95);
            border: 2px solid #ffb6c1;
        }
        
        .message-box.color-2 {
            background-color: rgba(230, 247, 255, 0.95);
            border: 2px solid #91d5ff;
        }
        
        .message-box.color-3 {
            background-color: rgba(246, 255, 237, 0.95);
            border: 2px solid #b7eb8f;
        }
        
        .message-box.color-4 {
            background-color: rgba(255, 251, 230, 0.95);
            border: 2px solid #ffe58f;
        }
        
        .message-box.color-5 {
            background-color: rgba(249, 240, 255, 0.95);
            border: 2px solid #d3adf7;
        }
        
        /* 关闭按钮 */
        .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 移动端控制按钮 */
        .controls-container {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 999;
        }
        
        .control-btn {
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #ddd;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            font-size: 20px;
        }
        
        /* 音量控制滑块 */
        .volume-slider-container {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px 15px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 998;
        }
        
        .volume-slider-container input {
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- 音频元素 -->
    <audio id="backgroundMusic" loop>        <source src="3.mp3" type="audio/mpeg">
    您的浏览器不支持音频元素。
   </audio>
s    
    <!-- 控制按钮组 -->
    <div class="controls-container">
        <div class="control-btn" id="musicToggle">♪</div>
        <div class="control-btn" id="generateHeart">❤️</div>
    </div>
    
    <!-- 音量控制 -->
    <div class="volume-slider-container">
        <span>🔊</span>
        <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.3">
    </div>
    
    <script>
        // 爱心颜色数组
        const heartColors = ['#ff4d6d', '#ff758f', '#ff8fa3', '#ffb3c1', '#ffccd5', '#ff99ac', '#ff6680', '#ff3355'];
        
        // 对话框消息数组
        const messages = [
            '你超棒的！',
            '每天都要元气满满～',
            '记得多喝水哦',
            '好好爱自己',
            '今天也要开心呀',
            '笑一笑，没什么大不了',
            '你值得被温柔以待',
            '别熬夜，早点休息',
            '记得吃水果',',',
            '天冷冷的，多穿点衣服',
            '顺顺利利',
            '所有美好都在等你',
            '加油，你可以的',
            '保持热爱，奔赴山海',
            '每一天都是新的开始',
            '你笑起来真好看',
            '世界因你而美好',
            '记得拥抱自己',
            '今天的你也很努力',
            '慢慢来，你已经很棒了'
        ];
        
        // 生成随机爱心
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            
            // 设置随机大小（移动端适配）
            const size = Math.random() * 25 + 15;
            heart.style.width = `${size}px`;
            heart.style.height = `${size}px`;
            
            // 随机颜色
            const color = heartColors[Math.floor(Math.random() * heartColors.length)];
            heart.style.backgroundColor = color;
            
            // 随机初始位置
            heart.style.left = `${Math.random() * 90 + 5}%`;
            heart.style.bottom = '-50px';
            
            // 随机动画持续时间
            const duration = Math.random() * 3 + 3;
            heart.style.animationDuration = `${duration}s`;
            
            // 随机延迟
            const delay = Math.random() * 1;
            heart.style.animationDelay = `${delay}s`;
            
            // 添加到页面
            document.body.appendChild(heart);
            
            // 爱心点击事件（支持触摸）
            heart.addEventListener('click', function(e) {
                e.preventDefault();
                showMessage(e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY);
            });
            
            // 支持触摸
            heart.addEventListener('touchstart', function(e) {
                e.preventDefault();
                showMessage(e.touches[0].clientX, e.touches[0].clientY);
            }, { passive: false });
            
            // 动画结束后移除
            setTimeout(() => {
                heart.remove();
            }, (duration + delay) * 1000);
        }
        
        // 显示对话框
        function showMessage(x, y) {
            const messageBox = document.createElement('div');
            messageBox.className = 'message-box';
            
            // 随机选择颜色样式
            const colorClass = 'color-' + (Math.floor(Math.random() * 5) + 1);
            messageBox.classList.add(colorClass);
            
            // 随机选择消息
            const message = messages[Math.floor(Math.random() * messages.length)];
            
            // 添加关闭按钮和消息内容
            messageBox.innerHTML = `
                <button class="close-btn">&times;</button>
                <div class="message-content">${message}</div>
            `;
            
            // 设置位置（移动端适配）
            const boxWidth = 280; // 移动端更宽的对话框
            const boxHeight = 100;
            
            // 计算合适的位置
            let leftPos = x - boxWidth / 2;
            let topPos = y - boxHeight - 20;
            
            // 确保在屏幕内
            if (leftPos < 10) leftPos = 10;
            if (leftPos > window.innerWidth - boxWidth - 10) leftPos = window.innerWidth - boxWidth - 10;
            if (topPos < 10) topPos = y + 30; // 移动端需要更大间距
            
            messageBox.style.left = `${leftPos}px`;
            messageBox.style.top = `${topPos}px`;
            
            // 添加到页面
            document.body.appendChild(messageBox);
            
            // 关闭按钮事件
            messageBox.querySelector('.close-btn').addEventListener('click', function() {
                messageBox.remove();
            });
            
            // 点击页面其他地方关闭
            setTimeout(() => {
                document.addEventListener('click', closeMessageOnClick, { once: true });
                document.addEventListener('touchstart', closeMessageOnTouch, { once: true, passive: false });
            }, 100);
            
            function closeMessageOnClick(e) {
                if (!messageBox.contains(e.target)) {
                    messageBox.remove();
                }
            }
            
            function closeMessageOnTouch(e) {
                if (!messageBox.contains(e.target)) {
                    messageBox.remove();
                }
            }
            
            // 防止点击对话框内部触发关闭
            messageBox.addEventListener('click', function(e) {
                e.stopPropagation();
            });
            
            messageBox.addEventListener('touchstart', function(e) {
                e.stopPropagation();
            }, { passive: false });
            
            // 8秒后自动关闭（移动端更快关闭）
            setTimeout(() => {
                messageBox.style.opacity = '0';
                messageBox.style.transform = 'translateY(20px)';
                setTimeout(() => messageBox.remove(), 300);
            }, 8000);
        }
        
        // 自动弹出消息函数
        function autoShowMessage() {
            // 随机位置
            const x = Math.random() * (window.innerWidth - 200) + 100;
            const y = Math.random() * (window.innerHeight - 150) + 50;
            showMessage(x, y);
        }
        
        // 音乐控制
        const audio = document.getElementById('backgroundMusic');
        const musicToggle = document.getElementById('musicToggle');
        const volumeSlider = document.getElementById('volumeSlider');
        
        // 设置初始音量
        audio.volume = volumeSlider.value;
        
        // 移动端音频播放处理
        function tryPlayAudio() {
            audio.play().then(() => {
                musicToggle.textContent = '⏸';
            }).catch(e => {
                console.log('播放需要用户交互:', e);
                musicToggle.textContent = '♪';
            });
        }
        
        // 监听用户交互后尝试播放
        document.addEventListener('click', function initAudio() {
            tryPlayAudio();
            document.removeEventListener('click', initAudio);
        }, { once: true });
        
        document.addEventListener('touchstart', function initAudioTouch() {
            tryPlayAudio();
            document.removeEventListener('touchstart', initAudioTouch);
        }, { once: true, passive: true });
        
        // 音乐播放/暂停切换
        musicToggle.addEventListener('click', function() {
            if (audio.paused) {
                audio.play().catch(e => console.log('音频播放失败:', e));
                musicToggle.textContent = '⏸';
            } else {
                audio.pause();
                musicToggle.textContent = '♪';
            }
        });
        
        // 音量调节
        volumeSlider.addEventListener('input', function() {
            audio.volume = volumeSlider.value;
        });
        
        // 生成爱心按钮
        document.getElementById('generateHeart').addEventListener('click', function() {
            for (let i = 0; i < 5; i++) {
                setTimeout(createHeart, i * 150);
            }
        });
        
        // 增加爱心生成频率（移动端优化）
        setInterval(createHeart, 600);
        
        // 初始生成爱心
        setTimeout(() => {
            for (let i = 0; i < 15; i++) {
                createHeart();
            }
        }, 100);
        
        // 设置自动弹出消息
        function startAutoMessages() {
            autoShowMessage();
            
            function scheduleNextMessage() {
                const delay = Math.random() * 5000 + 6000;
                setTimeout(() => {
                    autoShowMessage();
                    scheduleNextMessage();
                }, delay);
            }
            
            scheduleNextMessage();
        }
        
        // 页面加载后开始
        window.addEventListener('load', startAutoMessages);
        
        // 防止移动端滚动和缩放
        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, { passive: false });
    </script>
</body>
</html>